<template>

  <div class="mainDiv"  >
    <div style="display:block;width:100%;min-height:900px;background: url(../../static/images/star-bg.svg) no-repeat;background-size: 100%;" >


    <div class="div0">


    <div class="div1" style="text-align: right">
      <img src="../../static/images/loggif.gif" width="94" height="94" style="float: left; ">
      <h1 style="text-align: right">m12Blog</h1>

      <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>


      <p style="color: #74777b ; ">{{data}} &nbsp;&nbsp;  {{language}}   &nbsp;&nbsp; {{title}}</p>
<!--      <hr style=" color: white; width: 80px ; margin: 0px 240px 0px auto"><br>-->
   <!--   <p style="color: white; width: 60px ; margin: 0px 120px 0px auto">{{language}}</p>-->
<!--      <hr style=" color: white; width: 80px ; margin: 0px 120px 0px auto"><br>-->
    <!--  <h5 style="color: white; width: 100px ; margin: 0px 0px 0px auto">{{title}}</h5>-->
<!--      <hr style=" color: white; width: 80px ; margin: 0px 0px 0px auto"><br>-->
    </div>
    <div class="mavonEditor">
    <!--:toolbarsFlag=false 不显示工具栏  defaultOpen = "preview" 默认预览 -->
    <mavon-editor
      :subfield=false
      :boxShadow="false"
      style="min-height: 700px"
      v-model="value"
      :toolbarsFlag=false
      defaultOpen="preview"
      ref=md
      :ishljs= "true"
    />
  </div>
    </div>

    </div>

  </div>
</template>

<script>
    export default {
        name: "markdown",
      data(){
          return{
            value : "",
            title:"",
            language:"",
            data:"",
            uid : "",
          }
      },
     mounted:function(){//编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会做一些axios请求获取数据。
          this.showMongo();
     },
      methods:{
          showMongo(){//执行钩子
            let that = this;
            let formData = new FormData();
            that.uid = that.getCookie("selectTemp");//获取指定cookie的值
            console.log("获取到的Cookie",that.uid);
            formData.append("uuid",that.uid);
            that.axios({
              url: '/api/mongoOne',
              method: 'post',
              data: formData,
              headers: {'Content-Type': 'multipart/form-data'},
            }).then(function (response) {
              if (response.status === 200){
                that.value =  decodeURIComponent(response.data.m12content);
                //console.log(response.data.m12content)
                //vm.defaultOpen = "preview";
                console.log(that.value)
                that.title = response.data.m12title;
                console.log(that.title)
                that.data  = response.data.m12data
                that.language = response.data.m12language
              }
            })
          }
      }
    }
</script>

<style scoped>
  .mavonEditor{
    width: 90%;
    margin: 0px auto auto auto;

  }
  .mainDiv{
    background-color: #24292e;
    min-height: 100%;
    width: 100%;
    position:absolute;
    top: 0px;
    left: 0px;
  }
.div1{
  margin: 10% auto 0px auto;
  width: 90%;
  color: #ffffff;
}
  .div0{
    width: 70%;
    margin: 10% auto;
    padding:50px 0px;
    /*background-color: white;*/
    border-radius:10px 10px 0 0;

  }
</style>
